import React, { FunctionComponent } from 'react';
import { Form, Tabs } from 'antd';
import {createRespResult, KfFloatingContextProps, KfQuickForm, KfRichEditor} from 'kf-web-library';
import * as API from '@/services';

const FormItem = Form.Item;

type DataFormProps = {} & KfFloatingContextProps;
const QuickForm: FunctionComponent<DataFormProps> = (props) => {
  const { ...rest } = props;
  return (
    <KfQuickForm
      formType={'modify'}
      formProps={{
        labelCol: {
          flex: '0 0 80px',
        },
        wrapperCol: {
          flex: '1',
        },
      }}
      queryRequest={{
        modify: true,
        create: true,
      }}
      defaultQueryRequest={() => API.querySiteAboutInfo().then(resp=>{
        return new Promise((resolve) => {
          const newRespResult = createRespResult(
            {
              ...resp.data,
              privacy: {
                textCn: resp.data?.legalLiability?.textCn || '',
                textEn: resp.data?.legalLiability?.textEn || '',
              }
            },
            resp.flag,
            {},
          ) as API.RespResult<API.SiteAboutInfo>;
          resolve(newRespResult);
        });
      })}
      submitRequest={{
        modify: (formValues) => {
          return API.patchSiteAboutInfo({
            legalLiability: formValues.legalLiability,
          });
        },
      }}
      {...rest}
    >
      <Tabs
        defaultActiveKey="cn"
        items={[
          {
            label: '中文',
            key: 'cn',
            forceRender: true,
            children: (
              <>
                <FormItem name={nameof.split<API.SiteAboutInfo>((x) => x.legalLiability.textCn)} label={null} rules={[{ required: true }]}>
                  <KfRichEditor />
                </FormItem>
              </>
            ),
          },
          {
            label: '英文',
            key: 'en',
            forceRender: true,
            children: (
              <>
                <FormItem name={nameof.split<API.SiteAboutInfo>((x) => x.legalLiability.textEn)} label={null} rules={[{ required: false }]}>
                  <KfRichEditor />
                </FormItem>
              </>
            ),
          },
        ]}
      />
    </KfQuickForm>
  );
};
export default QuickForm;
